<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="box">
                    <div class="left">
                        <p>本月预警处理时间</p>
                        <div class="leftIMG">
                            <p class="big">{{ this.NowMonthAllTime }}</p>
                            <p class="small">分钟</p>
                        </div>
                        <p>最快处理时间<span class="fastTime">{{ this.NowMonthFastTime }}</span>分钟</p>
                    </div>
                    <div class="center">
                        <div class="centerIMG">
                            <p class="big" v-if="(this.NowMonthAllTime - this.LastMonthAllTime) < 0">对比上月处理时间缩短了</p>
                            <p class="big" v-else>对比上月处理时间增加了</p>
                            <p class="small"><span class="num">{{ Math.abs(this.NowMonthAllTime - this.LastMonthAllTime)
                            }}</span>分钟</p>
                        </div>
                    </div>
                    <div class="right">
                        <p>上月预警处理时间</p>
                        <div class="leftIMG">
                            <p class="big">{{ this.LastMonthAllTime }}</p>
                            <p class="small">分钟</p>
                        </div>
                        <p>最快处理时间<span class="fastTime">{{ this.LastMonthFastTime }}</span>分钟</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { handleWarningTime } from "@/api/warning";

export default {
    name: "alertHandlingTime",  //预警处理时间
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            currentIndex: 0,
            NowMonthAllTime: 0,
            NowMonthFastTime: 0,
            LastMonthAllTime: 0,
            LastMonthFastTime: 0,
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getTime()
        }
    },
    mounted() {

    },
    methods: {
        //预警处理时间
        async getTime() {
            let query = {
                month: this.nowMonth
            }
            let res = await handleWarningTime(query);
            if (res.code == 200) {
                // console.log('预警处理时间', res.data);
                this.NowMonthAllTime = res.data.now.totalTime
                this.NowMonthFastTime = res.data.now.minTime
                this.LastMonthAllTime = res.data.last.totalTime
                this.LastMonthFastTime = res.data.last.minTime

                if (this.NowMonthAllTime - this.LastMonthAllTime < 0) {
                    // console.log('对比上月减少了');
                }
            }
        },
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner13.png);
    display: flex;
    justify-content: center;

}

* {
    padding: 0;
    margin: 0;
}

.box {
    width: 70%;
    height: 70%;
    // border: 1px solid red;
    margin-top: 240px;
    display: flex;
    margin-left: 30px;

    .left {
        width: 400px;
        height: 100%;
        // border: 1px solid yellow;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: -90px;
        margin-top: 20px;

        p {
            font-size: 40px;
            color: white;
            font-weight: 300;
            width: 150%;
            // border: 1px solid red;
        }

        .leftIMG {
            width: 400px;
            height: 400px;
            background-image: url(../../../assets/Frame28.png);
            // background-repeat: no-repeat;
            // background-size: cover;
            margin-top: 60px;
            margin-bottom: 60px;
            // border: 1px solid orange;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .big {
                font-size: 40px;
                color: white;
            }

            .small {
                font-size: 20px;
                color: white;
                opacity: 0.7;
            }
        }

        .fastTime {
            font-size: 64px;
            color: #567fff;
            margin-left: 10px;
            margin-right: 10px;
        }
    }

    .center {
        width: 681px;
        height: 100%;
        // border: 1px solid white;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;

        .centerIMG {
            // border: 1px solid yellow;
            width: 681px;
            height: 561px;
            margin-top: 50px;
            background-image: url(../../../assets/Frame126.png);
            background-repeat: no-repeat;
            background-size: cover;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .big {
                font-size: 32px;
                color: #97a5e8;
            }

            .small {
                font-size: 32px;
                color: #97a5e8;
            }

            .num {
                font-size: 60px;
                color: #57f1fa;
            }
        }
    }

    .right {
        width: 400px;
        height: 100%;
        // border: 1px solid yellow;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -90px;
        margin-top: 20px;

        p {
            font-size: 40px;
            color: white;
            font-weight: 300;
            width: 150%;
            // border: 1px solid red;
        }

        .leftIMG {
            width: 400px;
            height: 400px;
            background-image: url(../../../assets/Frame111.png);
            // background-repeat: no-repeat;
            // background-size: cover;
            margin-top: 60px;
            margin-bottom: 60px;
            // border: 1px solid orange;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .big {
                font-size: 40px;
                color: white;
            }

            .small {
                font-size: 20px;
                color: white;
                opacity: 0.7;
            }
        }

        .fastTime {
            font-size: 64px;
            color: #be833b;
            margin-left: 10px;
            margin-right: 10px;
        }
    }
}
</style>